/* 通用设置 */
* {
  margin: 0;
  padding: 0;
}
:root {
  font-size: 1.526vw;
  font-family: 'Microsoft Yahei';
}
html,body {
  height: 100%;
}
/* 音乐盒子 */
.music {
  position: fixed;
  top: 3vh;
  right: 4vw;
  width: 15vw;
  height: 15vw;
  border: 4px solid #ef1635;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
}
.music > img:first-of-type {
  position: absolute;
  top: 24%;
  right: 2.5%;
  width: 28.426%;
  z-index: 1;
}
.music > img:last-of-type {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 79%;
}
.music > audio {
  opacity: 0;
}
.music > img.play {
  animation: music_disc 4s linear infinite;
}
@keyframes music_disc {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 背景设置 */
.page {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
}
.page > .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* 第一个页面 */
#page1 {
  display: block;
}
#page1 .bg {
  background-image: url(./images/p1_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
#page1 > .p1-denglong {
  position: absolute;
  top: -3.1%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 45vw;
  height: 71.2vh;
  font-size: 3.506rem;
  background: url(./images/p1_lantern.png) no-repeat center bottom;
  background-size: 100%;
  padding-top: 31vh;
  box-sizing: border-box;
  text-align: center;
}
#page1 > .p1-denglong::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  width: 30vw;
  height: 30vw;
  background-color: #d60b3b;
  opacity: 0.5;
  box-shadow: 0 0 10vw 10vw #d60b3b;
  border-radius: 50%;
  /* 添加动画效果 */
  animation: p1_lantern .5s infinite alternate;
}
@keyframes p1_lantern {
  0% {
    opacity: 0.5;
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
  }
}
#page1 > .p1-icon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9vh;
  background: url(./images/p1_minxi.png) no-repeat center center;
  background-size: 100%;
  width: 50vw;
  height: 10vh;
  margin: auto;
}
#page1 > .p1-words {
  font-size: 2.134rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  text-align: center;
}

/* 第二个页面 */
#page2 {
  display: none;
  transition: all 0.5s;
}
#page2.fade-out {
  opacity: .3;
  transform: translate(0, -100%);
}
#page2 > .bg {
  background-image: url(./images/p2_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
#page2 > .p2-bg-loading {
  z-index: 4;
  background-color: #ef1639;
  animation: p2_bg_loading 1s linear forwards; 
}
@keyframes p2_bg_loading {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
#page2 > .p2-circle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  background: url(./images/p2_circle_outer.png) no-repeat center center;
  background-size: 100%;
  width: 60vw;
  height: 60vw;
  /* 添加动画 */
  animation: p2_circle_outer 1s linear 3s infinite;
}
@keyframes p2_circle_outer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
#page2 > .p2-circle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  background: url(./images/p2_circle_middle.png) no-repeat center center;
  background-size: 100%;
  width: 46vw;
  height: 46vw;
  /* 添加动画 */
  animation: p2_circle_middle 1s linear 2s infinite;
}
@keyframes p2_circle_middle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
#page2 > .p2-circle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  background: url(./images/p2_circle_inner.png) no-repeat center center;
  background-size: 100%;
  width: 40vw;
  height: 40vw;
  /* 添加动画 */
  animation: p2_circle_inner 1s linear 1s infinite;
}

@keyframes p2_circle_inner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-1080deg);
  }
}
#page2 > .p2-year {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(./images/p2_2022.png) no-repeat center center;
  background-size: 100%;
  width: 35vw;
  height: 35vw;
}

/* 第三个页面 */
#page3 {
  display: none;
  transition: all 0.5s;
}
#page3.fade-in {
  transform: translate(0, -100%);
}
#page3 > .bg {
  background-image: url(./images/p3_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
#page3 > .p3-logo {
  width: 50vw;
  height: 6vh;
  position: absolute;
  top: 8vh;
  left: 0;
  right: 0;
  margin: auto;
  background: url(./images/p1_minxi.png) no-repeat center center;
  background-size: 100%;
}
#page3 > .p3-title {
  width: 48vw;
  height: 50vh;
  position: absolute;
  top: 21vh;
  left: 0;
  right: 0;
  margin: auto;
  background: url(./images/p3_title2.png) no-repeat center center;
  background-size: 100%;
}
#page3 > .p3-second {
  width: 23vw;
  height: 42vh;
  position: absolute;
  top: 25.5vh;
  left: 3.75vw;
  background: url(./images/p3_couplet_second.png) no-repeat center center;
  background-size: 100%;
}
#page3 .p3-first {
  width: 23vw;
  height: 42vh;
  position: absolute;
  top: 25.5vh;
  right: 3.75vw;
  background: url(./images/p3_couplet_first.png) no-repeat center center;
  background-size: 100%;
}
#page3 > .p3-fu {
  width: 35vw;
  height: 35vw;
  position: absolute;
  bottom: 5vh;
  right: 0;
  left: 0;
  margin: 0 auto;
  background: url(./images/p3_blessing.png) no-repeat center center;
  background-size: 100%;
  border-radius: 50%;
  animation: p3_blessing 2s linear infinite;
}
@keyframes p3_blessing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}